<template>
  <div class="container" >
        <div class="hjfsf"  v-bind:style="{backgroundImage:'url(' + bg + ')',
        backgroundRepeat:'center center repeat',
        backgroundSize:'100% 100%'}">
         </div>
    <div class="pic">
      <van-icon name="arrow-left" @click="goBack" />
    </div>
    播放页面
    <div class="audio_con">
      <img src="https://p5.music.126.net/obj/wo3DlcOGw6DClTvDisK1/4602256867/5855/63fb/325b/d7e4e3a244701ee85fecb5d4f6b5bd57.png?imageView=&quality=75&thumbnail=200y200" class="picstyle1" alt="">
      <img   :class="{'rotate360':showAnimate}" @animationend="reset" 
       @click="stopp"
       :src="songpicurl" class="picstyle" alt="" ref="rotate">
      <audio ref="audioExample" :src="musicurl" ></audio>
      <!-- <button @click="play(currentTime)">播放</button> -->
    </div>
  
  </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      musicurl: "",
      currentTime: "",
      songpicurl:"",
      showAnimate: false,
      state:0,
      bg: ""
    };
  },

  //页面加载
  mounted() {
    this.getSongData();
    this.getSongPic();
    this.play();
    this.play2()
  },
  methods: {
    getSongData() {
      this.musicurl = this.$route.params.musicurl;
      axios
        .get("http://171.220.242.237:3001/song/url", {
          params: {
            id: this.$route.params.id,
          },
        })
        .then((res) => {
          console.log(res.data.data);
          // this.musicurl = res.data.data[0].url;
          // console.log(res.data[0].url)
        })
        .catch((err) => {
          console.error(err);
        });
    },
    getSongPic() {
      axios
        .get("http://171.220.242.237:3001/song/detail", {
          params: {
            ids: this.$route.params.id,
          },
        })
        .then((res) => {
          console.log("图片地址=================="+res.data.songs[0].al.picUrl);
          this.songpicurl = res.data.songs[0].al.picUrl;
          this.bg = res.data.songs[0].al.picUrl;
        });
    },
    //返回上一页
    goBack() {
      // window.history.length > 1 ? this.$router.go(-1) : this.$router.push('/')
      this.$router.go(-1);
    },
    //拿到上一页面的播放进度
    getfrontTime() {
      console.log(
        "ssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss" +
          this.$route.params.bofangtime
      );
      this.currentTime = this.$route.params.bofangtime;
      console.log(this.currentTime);
      let audio = this.$refs.audioExample;
      audio.currentTime = this.currentTime;
      console.log(audio.currentTime);
      audio.play();
    },
    //播放
    play() {
      let audio = this.$refs.audioExample;
      //前一个页面的播放时间赋给此页面audio的播放时间
      audio.currentTime = this.$route.params.bofangtime;
      if (audio !== null) {
        if (this.$route.params.bofangtime == 0) {
          audio.pause();
        } else {
          let playpromise = audio.play();
          if (playpromise) {
            playpromise
              .then(() => {
                //音乐加载成功
                setTimeout(() => {}, audio.duration * 1000);
              })
              .catch(() => {
                this.play();
              });
          }
        }
      }
      audio.play();
    },
    play2() {
     this.$refs.rotate.style.animationPlayState = 'running';
    },
    reset() {
      this.$refs.rotate.style.animationPlayState = 'paused';
    },
    stopp(){
      console.log("已运行");
      this.state+=1;
      if(this.state==1){
        console.log("已行");
        this.reset()
        let audio = this.$refs.audioExample;
        audio.pause()
      }
      if(this.state==2){
        this.play2()
        let audio = this.$refs.audioExample;
        audio.play()
        this.state=0
      }
    }
    //
  },
};
</script>
<style scoped>
.rotate360 {
  animation: rotate360 7s linear 0.2s infinite;
}

@keyframes rotate360 {

  100% {
    transform: rotate(360deg);
  }
}

.picstyle1{
  width: 100%;
  border-radius: 50%;
  position: absolute;
	top: 50%;
	left: 50%;
	transform-origin: center center;
	transform: translate(-50%, -50%) rotate(0deg);
	width: 320px;
	height: 320px;
	background-size: cover;
	background-position: center;
	border: 2px solid #000;

}

.picstyle{
  width: 100%;
  border-radius: 50%;
  position: absolute;
	top: 50%;
	left: 50%;
	width: 240px;
	height: 240px;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	border: 2px solid #000;
	border-radius: 200px;
	animation: animations1 10s linear infinite forwards;
  animation-play-state: running;
}
.container{
  width: 100%;
  height: 100%;
}   
/* 大播放页面播放背景 */
.hjfsf{
  width: 100%;
  height: 100%;
  transform-origin: center center; 
  filter: blur(30px);
  /* 给图像设置高斯模糊 */
  position: fixed;
  opacity: 1;
  transform: scale(1.5);
}

.pic {
  height: 15rem;
}

.van-icon {
  font-size: 2rem;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  color: rgb(134, 125, 125);
}

@keyframes animations1 {
	0% {
		transform: translate(-50%, -50%) rotate(0deg);
	}

	50% {
		transform: translate(-50%, -50%) rotate(180deg);
	}
	100% {
		transform: translate(-50%, -50%) rotate(360deg);
	}
}


</style>



